<template>
  <div id="app" class="wrapper wrapper-content animated fadeInRight v-cloak" v-cloak>
    <div class="row">
      <div class="col-md-12">
        <form id="examineMainTargetForm" method="post" class="form m-t" @submit.prevent="save()" accept-charset="UTF-8">
          <input type="hidden" name="id" v-model="item.id"/>
          <input type="hidden" name="token" v-model="item.token"/>
          <input type="hidden" name="newFlag" v-model="newFlag"/>
          <div class="clearfix "></div>
          <div class="col-md-6">

            <div class="form-group clearfix">
              <label class="col-md-8 control-label">序号：</label>
              <div class="col-md-12">
                <input id="bean-code" name="code" v-model="item.code" class="form-control" type="text"
                    placeholder="请输入序号" required="" aria-required="true" aria-describedby="bean-code-error"
                    maxlength="55" aria-invalid="true">
                <span id="bean-code-error" class="help-block m-b-none" for="bean-code"></span>
              </div>
            </div>

            <div class="form-group clearfix">
              <label class="col-md-8 control-label">目标名称：</label>
              <div class="col-md-12">
                <input id="bean-name" name="name" v-model="item.name" class="form-control" type="text"
                    placeholder="请输入目标名称" required="" aria-required="true" aria-describedby="bean-name-error"
                    maxlength="55" aria-invalid="true">
                <span id="bean-name-error" class="help-block m-b-none" for="bean-name"></span>
              </div>
            </div>

            <div class="form-group clearfix">
              <label class="col-md-8 control-label">完成进度(%)：</label>
              <div class="col-md-12">
                <input id="bean-completedProgress" name="completedProgress" v-model="item.completedProgress"
                    class="form-control" type="text" placeholder="请输入完成进度，范围0-100" required="" aria-required="true"
                    aria-describedby="bean-completedProgress-error" aria-invalid="true" range="[0,100]">
                <span id="bean-completedProgress-error" class="help-block m-b-none" for="bean-completedProgress"></span>
              </div>
            </div>

            <div class="form-group clearfix">
              <label class="col-md-8 control-label">目标类型：</label>
              <div class="col-md-12">
                <!--                <div class="form-control" style="height: auto;">-->
                <select data-placeholder="选择目标类型" id="bean-type" name="type" class="form-control"
                    aria-describedby="bean-type-error" aria-invalid="true">
                  <option value="1" :selected="item.type == 1">年度目标</option>
                  <option value="2" :selected="item.type == 2">总体目标</option>
                </select>
                <span id="bean-type-error" class="help-block m-b-none" for="bean-type"></span>
                <!--                </div>-->
              </div>
            </div>
            <div class="form-group clearfix " id="yearDiv">
              <label class="col-md-8 control-label">任务年份：</label>
              <div class="col-md-12">
                <input id="bean-year" name="year" v-model="item.year" class="form-control" type="text"
                    placeholder="请输入任务年份" required="" aria-required="true" aria-describedby="bean-year-error"
                    maxlength="4" aria-invalid="true">
                <span id="bean-year-error" class="help-block m-b-none" for="bean-year"></span>
              </div>
            </div>

          </div>
          <div class="col-md-6">

            <div class="form-group clearfix">
              <label class="col-md-8 control-label">是否首页展示：</label>
              <div class="col-md-12">
                <div class="form-control" style="height: auto;">
                  <label> <input type="radio" value="0" name="showHome" :checked="item.showHome == 0">否</label>
                  <label> <input type="radio" value="1" name="showHome"
                      :checked="item.showHome == null || item.showHome == 1">是</label>
                  <span id="bean-showHome-error" class="help-block m-b-none" for="bean-showHome"></span>
                </div>
              </div>
            </div>
            <div class="form-group clearfix">
              <vue-area areaId="areaIds"
                  areaName="areaNames"
                  :areaIdVal="item.areaIds||staff.dto().areaId"
                  :areaNameVal="item.areaNames||staff.dto().areaName"
                  :areaFixed="item.areaIds||staff.dto().areaId"
                  :selectBy="item.areaIds||staff.dto().areaId"
                  areaRequired="true,true,true,false,false">
              </vue-area>
            </div>

            <div class="form-group clearfix">
              <label class="col-md-8 control-label">备注：</label>
              <div class="col-md-12">
                <textarea id="bean-memo" name="memo" class="form-control" placeholder="请输入备注"
                    aria-describedby="bean-memo-error" maxlength="255"
                    aria-invalid="true">{{item.memo}}</textarea>
                <span id="bean-memo-error" class="help-block m-b-none" for="bean-memo"></span>
              </div>
            </div>
          </div>

          <div class="clearfix "></div>
          <div class="col-12 text-center" style="height: 50px;">
            <div>
              <input class="btn btn-primary" type="submit" value="保存"/> | <a @click="lbox.closeMyBoxLayer()" class="btn btn-danger" href="javascript:">返回</a>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
import '@/assets/css/style.css'

import $ from '@/assets/js/jquery-vendor.js'
import 'jquery.cookie'
import axios from 'axios'
import '@/assets/js/validate/validation-vendor.js'

import {apiUtil, axiosContentType, site} from '@/assets/js/boss'
import vueArea from '@/components/vue-area'
import 'layui-laydate/dist/theme/default/laydate.css'
import laydate from 'layui-laydate'

export default {
  components: {
    'vue-area': vueArea
  },
  data() {
    return {
      item: {},
      newFlag: 0,
      uuidToken: ''
    }
  },
  mounted() {
    let that = window.$vueApp = this;
    document.getElementsByTagName('body')[0].className = 'fixed-sidebar full-height-layout';
    $('#examineMainTargetForm').validate();
    that.staff.init(function () {
      that.newFlag = sessionStorage.getItem(site.examineMainTarget.info);
      if (that.newFlag) that.uuidToken = apiUtil.guid();
      if (apiUtil.existSessionKey(site.examineMainTarget.info)) {
        that.info();
      }
    });

    if (!that.item.areaIds || that.item.areaIds == null) {
      that.item.areaIds = '51,5110,511025,,'; // 默认选择省市县区域
    }
    /*
          $('#bean-type').change(function () {
            if ($(this).val() === '1') {
              $('#yearDiv').removeClass('hide');
            } else {
              $('#yearDiv').addClass('hide');
            }
          }); */
    laydate.render({elem: '#bean-year', type: 'year', event: 'click'});
  },
  methods: {
    info() {
      let that = this;
      axios.get(site.examineMainTarget.info + sessionStorage.getItem(site.examineMainTarget.info), {}).then(function (response) {
        const result = response.data;
        if (result.code === 0) {
          that.item = result.data;
          if (that.item.type === 2) {
            $('#yearDiv').addClass('hide');
          }
        } else {
          alert(result.message);
        }
      });
    },
    save() {
      let that = this;
      if ($('#examineMainTargetForm').valid()) {
        if ($('#bean-type').val() !== '1') {
          that.item.year = ''; // 目标类型非年度目标时，清空年份值
        }
        axios.post(site.examineMainTarget.save, $('#examineMainTargetForm').serialize(),
            axiosContentType.xWwwFormUrlencoded).then(function (response) {
          const result = response.data;
          // console.info("获取数据.." + JSON.stringify(result));
          if (result.code === 0) {
            parent.$vueApp.page();
            alert('保存成功!');
            that.lbox.closeMyBoxLayer()
          } else {
            alert(result.message);
          }
        });
      }
    }
  }
}
</script>

